<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		h1,h2,h3,h4,h5,h6{
			padding: 0;
			margin: 0;
			padding-left: 15px;
			font-size: 14px;
			font-weight: 500;
			text-align: left;
		}
		body{
			background:#1C1D26;
			/*background: #fff;*/
		}
		#box{
			width: 940px;
			height: 635px;
			margin:25px auto;
		}
		table{
			width: 940px;
			height: 475px;
			table-layout: fixed;
		}
		table tr td{
			height: 50px;
			text-align: center;
			line-height: 50px;	
			border-radius: 5px; 
			position: relative;
			left: 0;
			top: 0;
		}
		table tr .empty{
			empty-cells: hide;
		}
		.fadegreen{
			background: #81D183;
			border: 1px solid #81D183;
		}
		.blue{
			background: #6575D3;
			border: 1px solid #7A9AE6;
		}	
		.yellow{
			background: #D1D157;
			border: 1px solid #F6F661;
		}
		.orange{
			background: #D17D47;
			border: 1px solid #F6914E;
		}
		.green{
			background: #55D157;
			border: 1px solid #61F661;
		}
		
		.purpoe{
			background: #8591D3;
			border: 1px solid #9BA9F6;
		}
		.deepOrange{
			background: #D17D57;
			border: 1px solid #F69161;
		}
		
		.gray{
			background: #D1D1D3;
			border: 1px solid #F6F6F6;
		}
		/*
		colgroup.gray td{
		}*/
		.deepPink{
			background: #D17DD3;
		}
		.deepPink td{
			border: 1px solid #F691F6;
		}
		.deepPink td.pinkShadow{
			background: #F691F6;
			box-shadow: 0 0 12px #000;
			z-index: 10;
		}
		.pos{
			display: none;
			position: absolute;
			left: 0;
			top: 54px;
			z-index: 10;
			width: 258px;
			height: 128px;
			background: #fff;
		}
		.pos h3,h5,h6{
			line-height: 20px;
			margin-top: 8px;
			padding-right: 8px;
			padding-left: 8px;
		}
		.pos h3{
			font-weight: 800;
		}
		.pos h5{
			line-height: 16px;
			font-size: 12px;
		}
		.pos h6{
			font-weight: 800;
			color: orange;
		}
		table tr .shadow{
			box-shadow: 0 0 12px #000;
			z-index: 10;
		}
	</style>
	<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div id="box">
		<table cellspacing="0" align="center">
			<tr>
				<td class="fadegreen">
				html
					<div class="pos">
						<h3>&lt;html&gt;</h3>
						<h5>Document root element.<br>文档根元素</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td colspan="15" class="empty"></td>
				<td class="deepOrange">col
					<div class="pos">
						<h3>&lt;col&gt;</h3>
						<h5>Columns in a table.<br>表格中的列</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">table
					<div class="pos">
						<h3>&lt;table&gt;</h3>
						<h5>Table of multi-dimensional data.<br>表格</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
			</tr>
			<tr>
				<td class="blue">head
					<div class="pos">
						<h3>&lt;head&gt;</h3>
						<h5>First element of the HTML document. Contains document metadata.<br>HTML文档中的第一个元素。包含文档元数据</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">span
					<div class="pos">
						<h3>&lt;span&gt;</h3>
						<h5>Container with no semantic meaning.<br>无语义的容器</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td colspan="8" class="empty">
				</td>
				<td class="orange">div
					<div class="pos">
						<h3>&lt;div&gt;</h3>
						<h5>Container with no semantic meaning.<br>无语义的容器</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">fieldset
					<div class="pos">
						<h3>&lt;fieldset&gt;</h3>
						<h5>Set of form controls grouped by theme.<br>按用途组合的一组表单控制元素</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">form
					<div class="pos">
						<h3>&lt;form&gt;</h3>
						<h5>Form.<br>表单</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">body
					<div class="pos">
						<h3>&lt;body&gt;</h3>
						<h5>Document content.<br>文档的主体</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">h1
					<div class="pos">
						<h3>&lt;h1&gt;</h3>
						<h5>Heading for the current section.<br>当前章节的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">section
					<div class="pos">
						<h3>&lt;section&gt;</h3>
						<h5>Contains elements grouped by theme, for example a chapter or tab box.<br>包含同主题一组元素的容器，例如文档的章节</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">colgroup
					<div class="pos">
						<h3>&lt;colgroup&gt;</h3>
						<h5>Defines a group of columns in a table.<br>对表格中的若干列进行组合</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">tr
					<div class="pos">
						<h3>&lt;tr&gt;</h3>
						<h5>A row of cells.<br>表格中的一行单元</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
			</tr>
			<tr>
				<td class="blue">title
					<div class="pos">
						<h3>&lt;title&gt;</h3>
						<h5>Document title.<br>文档标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">a
					<div class="pos">
						<h3>&lt;al&gt;</h3>
						<h5>Hyperlink.<br>超链接</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td colspan="8" class="empty"></td>
				<td class="orange">pre
					<div class="pos">
						<h3>&lt;pre&gt;</h3>
						<h5>Text that is preformatted in the HTML code.<br>在HTML代码中预先格式化的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">meter
					<div class="pos">
						<h3>&lt;meter&gt;</h3>
						<h5>Control for entering a numeric value in a known range.<br>控制在已知范围内输入度量值</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">select
					<div class="pos">
						<h3>&lt;select&gt;</h3>
						<h5>Control for selecting from multiple options.<br>有多选值的下拉列表</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">aside
					<div class="pos">
						<h3>&lt;aside&gt;</h3>
						<h5>Content related to surrounding elements that doesn't belong inline, such as a advertising or quotes.<br>与周围元素相关的内容，但分开显示</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">h2
					<div class="pos">
						<h3>&lt;h2&gt;</h3>
						<h5>Heading for the current section.<br>当前章节的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">header
					<div class="pos">
						<h3>&lt;header&gt;</h3>
						<h5>Navigation or introductory elements for the current section.<br>当前章节的导航或引导性元素</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">caption
					<div class="pos">
						<h3>&lt;caption&gt;</h3>
						<h5>Title of a table.<br>表格的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">td
					<div class="pos">
						<h3>&lt;td&gt;</h3>
						<h5>Table cell.<br>表格单元格</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
			</tr>
			<tr>
				<td class="blue">meta
					<div class="pos">
						<h3>&lt;meta&gt;</h3>
						<h5>Document metadata that can't be represented with other elements.<br>文档的元数据</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">rt
					<div class="pos">
						<h3>&lt;rt&gt;</h3>
						<h5>Annotation of preceding text.<br>文本的解释</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">dfn
					<div class="pos">
						<h3>&lt;dfn&gt;</h3>
						<h5>Term being defined by the parent section.<br>由父级章节定义的项</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">em
					<div class="pos">
						<h3>&lt;em&gt;</h3>
						<h5>Text that should be emphasised.<br>需要强调的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">i
					<div class="pos">
						<h3>&lt;il&gt;</h3>
						<h5>Text in a alternate voice or mood, such as a technical term.<br>斜体的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">small
					<div class="pos">
						<h3>&lt;small&gt;</h3>
						<h5>small：An aside, such as fine print.<br>更小的旁注信息</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">ins
					<div class="pos">
						<h3>&lt;ins&gt;</h3>
						<h5>ins：Text that has been inserted during document editing.<br>在文档编辑过程中插入的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">s
					<div class="pos">
						<h3>&lt;sl&gt;</h3>
						<h5>Text that is outdated or no longer accurate.<br>失效或不再准确的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">br
					<div class="pos">
						<h3>&lt;br&gt;</h3>
						<h5>Line break.<br>换行符</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">p
					<div class="pos">
						<h3>&lt;pl&gt;</h3>
						<h5>Paragraph content.<br>段落内容</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">blockquote
					<div class="pos">
						<h3>&lt;blockquote&gt;</h3>
						<h5>Quote from another source.<br>从其它源引用的内容</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">legend
					<div class="pos">
						<h3>&lt;legend&gt;</h3>
						<h5>Define a name for a fieldset.<br>图例或表的说明</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">optgroup
					<div class="pos">
						<h3>&lt;optgroup&gt;</h3>
						<h5>Group of option.<br>选项组</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">address
					<div class="pos">
						<h3>&lt;address&gt;</h3>
						<h5>Contact information for the current article.<br>当前文章的联系信息</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">h3
					<div class="pos">
						<h3>&lt;h3&gt;</h3>
						<h5>Heading for the current section.<br>当前章节的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">nav
					<div class="pos">
						<h3>&lt;nav&gt;</h3>
						<h5>Contains a collection of links.<br>导航链接的容器</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="gray">menu
					<div class="pos">
						<h3>&lt;menu&gt;</h3>
						<h5>Set of commands.<br>菜单列表</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">th
					<div class="pos">
						<h3>&lt;th&gt;</h3>
						<h5>Table heading.<br>表头</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
			</tr>
			<tr>
				<td class="blue">base
					<div class="pos">
						<h3>&lt;base&gt;</h3>
						<h5>Specifies URL which non-absolute URLs are relative to.<br>定义非绝对的链接地址所相对的默认 URL</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">rp
					<div class="pos">
						<h3>&lt;rp&gt;</h3>
						<h5>Contains semantically meaningless markup for browsers that don't understand ruby annotations.<br>针对不支持ruby 注音的浏览器，用于注释信息</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">abbr
					<div class="pos">
						<h3>&lt;abbr&gt;</h3>
						<h5>Abbreviation or acronym.<br>缩写或缩略词</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">time
					<div class="pos">
						<h3>&lt;time&gt;</h3>
						<h5>Time defined in a machine readable format.<br>时间</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">b
					<div class="pos">
						<h3>&lt;bl&gt;</h3>
						<h5>Stylistically separated text of equal importance, such as a product name.<br>粗体文本，用于强调</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">strong
					<div class="pos">
						<h3>&lt;strong&gt;</h3>
						<h5>Text that is important.<br>重要的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">del
					<div class="pos">
						<h3>&lt;del&gt;</h3>
						<h5>Text that has been removed during document editing.<br>在编辑过程中被删除的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">kbd
					<div class="pos">
						<h3>&lt;kbd&gt;</h3>
						<h5>Example input (usually keyboard) for a program.<br>由键盘输入的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">hr
					<div class="pos">
						<h3>&lt;hr&gt;</h3>
						<h5>Thematic break within a paragraph.<br>水平线/内容主题的变化</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">ol
					<div class="pos">
						<h3>&lt;ol&gt;</h3>
						<h5>Ordered list.<br>有序列表</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">dl
					<div class="pos">
						<h3>&lt;dl&gt;</h3>
						<h5>List of term-description pairs.<br>带定义的列表</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">label
					<div class="pos">
						<h3>&lt;label&gt;</h3>
						<h5>Caption for a form control.<br>表单控件的标题（标签）</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">option
					<div class="pos">
						<h3>&lt;option&gt;</h3>
						<h5>Single option within a select control.<br>下拉列表中的单一选项</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">datalist
					<div class="pos">
						<h3>&lt;datalist&gt;</h3>
						<h5>Define sets of options.<br>定义选项列表</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">h4
					<div class="pos">
						<h3>&lt;h4&gt;</h3>
						<h5>Heading for the current section.<br>当前章节的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">article
					<div class="pos">
						<h3>&lt;article&gt;</h3>
						<h5>Section of the page content, such as a blog or forum post.页面内容的独立部分，如博客文章、论坛帖子</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="gray">command
					<div class="pos">
						<h3>&lt;command&gt;</h3>
						<h5>Command the user can perform, such as publishing an article.<br>用户可以执行的命令，如发表一篇文章</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">tbody
					<div class="pos">
						<h3>&lt;tbody&gt;</h3>
						<h5>Contains rows that hold the table's data.<br>表格主体</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
			</tr>
			<tr>
				<td class="blue">link
					<div class="pos">
						<h3>&lt;link&gt;</h3>
						<h5>Other resources related to the document.<br>与文档相关的其它资源</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="blue">noscript
					<div class="pos">
						<h3>&lt;noscript&gt;</h3>
						<h5>Contains elements that are part of the document only if scripting is disabled.<br>当脚本被禁用时显示的一部分文档内容</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">q
					<div class="pos">
						<h3>&lt;ql&gt;</h3>
						<h5>Quoted text.<br>引用的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">var
					<div class="pos">
						<h3>&lt;var&gt;</h3>
						<h5>Mathematical or programming variable.<br>数学或程序变量</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">sub
					<div class="pos">
						<h3>&lt;sub&gt;</h3>
						<h5>Subscript text.<br>上标</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">mark
					<div class="pos">
						<h3>&lt;mark&gt;</h3>
						<h5>Text highlighted for referencing elsewhere.<br>突出显示的文本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">bdi
					<div class="pos">
						<h3>&lt;bdi&gt;</h3>
						<h5>Text that is separated from directional formatting of its surroundings.<br>从周围内容分开，而设置不同的文本方向</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">wbr
					<div class="pos">
						<h3>&lt;wbr&gt;</h3>
						<h5>Opportunity for a line break.<br>软回车（必要时才回车）</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">figcaption
					<div class="pos">
						<h3>&lt;figcaption&gt;</h3>
						<h5>Caption for a figure.<br>图片的标题，图题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">ul
					<div class="pos">
						<h3>&lt;ul&gt;</h3>
						<h5>Unordered list.<br>无序列表</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">dt
					<div class="pos">
						<h3>&lt;dt&gt;</h3>
						<h5>Term which will be described.<br>带定义的列表中的项目</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">input
					<div class="pos">
						<h3>&lt;input&gt;</h3>
						<h5>Generic form input.<br>表单中的输入字段</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">output
					<div class="pos">
						<h3>&lt;output&gt;</h3>
						<h5>Contains the results of a calculation.<br>输出的结果</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">keygen
					<div class="pos">
						<h3>&lt;keygen&gt;</h3>
						<h5>Generates private-public key pairs.<br>生成密钥对</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">h5
					<div class="pos">
						<h3>&lt;h5&gt;</h3>
						<h5>eading for the current section.<br>当前章节的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">footer
					<div class="pos">
						<h3>&lt;footer&gt;</h3>
						<h5>Footer of the current section.<br>当前章节的页脚</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="gray">summary
					<div class="pos">
						<h3>&lt;summary&gt;</h3>
						<h5>Caption of a details element.<br>dedails元素的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">thead
					<div class="pos">
						<h3>&lt;thead&gt;</h3>
						<h5>Contains rows with table headings.<br>表格中的表头行</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
			</tr>
			<tr>
				<td class="blue">style
					<div class="pos">
						<h3>&lt;style&gt;</h3>
						<h5>Styling defined inline data.<br>在文档中定义的样式</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="blue">script
					<div class="pos">
						<h3>&lt;script&gt;</h3>
						<h5>Inline or linked client side scripts.<br>内部或外部链接的脚本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">cite
					<div class="pos">
						<h3>&lt;cite&gt;</h3>
						<h5>Title of a referenced piece of work.<br>对参考文献等的引用</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">samp
					<div class="pos">
						<h3>&lt;samp&gt;</h3>
						<h5>Sample output of a program.<br>程序的样本</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">sup
					<div class="pos">
						<h3>&lt;sup&gt;</h3>
						<h5>Superscript text.<br>下标</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">ruby
					<div class="pos">
						<h3>&lt;ruby&gt;</h3>
						<h5>Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text.<br>东亚文字的注音，如中文的拼音</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">bdo
					<div class="pos">
						<h3>&lt;bdo&gt;</h3>
						<h5>Defines directional formatting for content.<br>定义内容的排版方向</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="yellow">code
					<div class="pos">
						<h3>&lt;code&gt;</h3>
						<h5>Fragment of code.<br>代码的片断</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">figure
					<div class="pos">
						<h3>&lt;figure&gt;</h3>
						<h5>Contains elements related to single concept, such as an illustration or code example.<br>独立的内容，如图像、代码等</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">li
					<div class="pos">
						<h3>&lt;li&gt;</h3>
						<h5>List item.<br>列表项目</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="orange">dd
					<div class="pos">
						<h3>&lt;dd&gt;</h3>
						<h5>Description for the preceding term.<br>带定义列表中对项目的描述</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">textarea
					<div class="pos">
						<h3>&lt;textarea&gt;</h3>
						<h5>Multiline free-form text input.<br>多行的文本输入区域</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">button
					<div class="pos">
						<h3>&lt;button&gt;</h3>
						<h5>A button.<br>按钮</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="green">progress
					<div class="pos">
						<h3>&lt;progress&gt;</h3>
						<h5>Control for displaying progress of a task.<br>运行中的进度控制</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">h6
					<div class="pos">
						<h3>&lt;h6&gt;</h3>
						<h5>Heading for the current section.<br>当前章节的标题</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="purpoe">hgroup
					<div class="pos">
						<h3>&lt;hgroup&gt;</h3>
						<h5>Collection of headings for the current section. The highest ranked heading represents the group in the document outline.<br>当前章节各标题的组合</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="gray">details
					<div class="pos">
						<h3>&lt;details&gt;</h3>
						<h5>Contains additional information, such as the contents of an accordian view.<br>附加的详细信息</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
				<td class="deepOrange">tfoot
					<div class="pos">
						<h3>&lt;tfoot&gt;</h3>
						<h5>Contains rows with summary of data.<br>表格的页脚/脚注行</h5>
						<h6>Mozilla,W3C Reference</h6>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="18" class="empty"></td>
			</tr>
			<tbody class="deepPink">
				<tr>
					<td colspan="6" class="empty" ></td>
					<td>img
						<div class="pos">
							<h3>&lt;img&gt;</h3>
							<h5>img：An image.<br>图像</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>area
						<div class="pos">
							<h3>&lt;area&gt;</h3>
							<h5>Hyperlink area in an image map.<br>图像映射的超链接区域</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>map
						<div class="pos">
							<h3>&lt;map&gt;</h3>
							<h5>Image map for adding hyperlinks to parts of an image.<br>在图像的一部分区域定义图像映射用于添加超链接</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>embed
						<div class="pos">
							<h3>&lt;embed&gt;</h3>
							<h5>Reference to non-HTML content.<br>嵌入的非HTML内容</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>object
						<div class="pos">
							<h3>&lt;object&gt;</h3>
							<h5>External resource such as an image, iframe or plugin.<br>嵌入的外部资源，如图像、iframe或插件</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>param
						<div class="pos">
							<h3>&lt;param&gt;</h3>
							<h5>Parameters for the parent object.<br>父级对象的参数</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>source
						<div class="pos">
							<h3>&lt;source&gt;</h3>
							<h5>Alternative sources for parent video or audio elements.<br>父级视频或音频元素的资源</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>iframe
						<div class="pos">
							<h3>&lt;iframe&gt;</h3>
							<h5>Nested browser frame.<br>嵌套的框架</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>canvas
						<div class="pos">
							<h3>&lt;canvas&gt;</h3>
							<h5>Bitmap which is editable by client side scripts.<br>可以通过客户端脚本编辑的图形（画布）</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>track
						<div class="pos">
							<h3>&lt;track&gt;</h3>
							<h5>Specifies external timing track for media elements.<br>媒体类元素的外部轨道</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>audio
						<div class="pos">
							<h3>&lt;audio&gt;</h3>
							<h5>Audio file.<br>音频文件</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
					<td>video
						<div class="pos">
							<h3>&lt;video&gt;</h3>
							<h5>Video.<br>视频</h5>
							<h6>Mozilla,W3C Reference</h6>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		$('table tr td').hover(function(){
			$(this).addClass('shadow').css({
				'background':$(this).css('border-color')
			}).find('.pos').show();
		},function(){
			$(this).removeClass('shadow').css({
				'background':''
			}).find('.pos').hide();
		})
		$('.deepPink tr td').hover(function(){
			$(this).addClass('pinkShadow').find('.pos').show();
		},function(){
			$(this).removeClass('pinkShadow').find('.pos').hide();
		})
	</script>
</body>
</html>